<template>
  <div class="box">
    <div class="imgUpLoad">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 300px;
          font-weight: 700;
        "
      >
        <div
          style="
            font-size: 30px;
            border-bottom: 5px solid #42a5ff;
            color: #42a5ff;
            margin-right: 20px;
          "
        >
          Step1
        </div>
        <div style="font-size: 24px">上传实拍图</div>
      </div>
      <input id="getimg" type="file" @change="handleFileChange" />
      <div class="chooseimg" v-if="img1">
        <img :src="img1" alt="" />
        <div style="font-size: 15px" class="changeagain" @click="choose">
          重新选择图片
        </div>
      </div>

      <div v-else class="tochoose" @click="choose">
        <i
          class="iconfont icontupianshangchuan"
          style="color: #fff; font-size: 40px; margin: auto"
        />
      </div>
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 300px;
          font-weight: 700;
        "
      >
        <div
          style="
            font-size: 30px;
            border-bottom: 5px solid #42a5ff;
            color: #42a5ff;
            margin-right: 20px;
          "
        >
          Step2
        </div>
        <div style="font-size: 24px">选择模型</div>
      </div>
      <div style="text-align: center; margin: 20px 0">
        <el-select v-model="modelvalue" placeholder="请选择模型">
          <el-option label="文心一言 V2" value="文心一言" />
          <el-option label="通义万相 V2" value="通义万相" />
          <el-option label="Midjourney V7" value="Midjourney" />
          <el-option label="Stable Diffusion 3.5" value="Stable" />
        </el-select>
      </div>
    </div>

    <div class="imgshow">
      <div class="imgshowbox">
        <video
          v-if="waitvideo"
          style="width: 100%; height: 100%"
          @ended="handleVideoEnded"
        >
          <source src="../../../img/等待生成.mp4" type="video/mp4" />
        </video>
        <div
          style="
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
          "
        >
          <img
            v-if="showimg"
            style="height: 100%; cursor: pointer"
            id="choosingimg"
            :src="imgs[0]"
            alt=""
            @click="() => (imgBig = true)"
          />
        </div>
      </div>
      <div class="imgshowbottom">
        <!-- <div v-if="waitvideo">
          <div v-for="item in imgcount" :key="item" style="width: 140px">
            正在生成图片
          </div>
        </div> -->
        <div v-if="showimg">
          <div
            style="cursor: pointer"
            v-for="(item, index) in imgs"
            :key="item"
          >
            <img
              :src="item"
              alt=""
              height="80px"
              @click="chooseimg(item, index)"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="tools">
      <div class="tool1" @click="onFocus1">
        正向提示词
        <el-input
          v-model="text1"
          style="width: 240px"
          :rows="2"
          type="textarea"
          :autosize="{ minRows: 3 }"
          placeholder="将生成图中想要生成的关键词填写在此处,例如:篮球鞋，足球鞋"
        />
      </div>
      <div class="tool2" @click="onFocus2">
        负向提示词
        <el-input
          v-model="text2"
          style="width: 240px"
          :rows="2"
          type="textarea"
          :autosize="{ minRows: 3 }"
          placeholder="将生成图中不想要生成的关键词填写在此处,例如:花朵，人物"
        />
      </div>
      <div class="tool3">
        画面质量
        <el-radio-group v-model="radio">
          <el-radio value="1" size="large"
            ><span style="color: white">普通</span></el-radio
          >
          <el-radio value="2" size="large"
            ><span style="color: white">高清</span></el-radio
          >
          <el-radio value="3" size="large"
            ><span style="color: white">超清</span></el-radio
          >
        </el-radio-group>
      </div>
      <div class="tool35">
        图片变化幅度
        <div>
          <el-slider v-model="quality" :step="10" />
        </div>
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          "
        >
          <i>更像爆款图</i>
          <i>更像提示词</i>
        </div>
      </div>
      <div class="tool4">
        画面张数
        <div>
          <el-radio-group v-model="imgcount">
            <el-radio value="2" border>2张</el-radio>
            <el-radio value="4" border>4张</el-radio>
          </el-radio-group>
        </div>
      </div>

      <el-button type="info" @click="submit" class="btn">生成新款</el-button>

      <div
        :class="['dialog', nowinput !== 0 ? '' : 'hidden']"
        @mousedown="() => dialogBox.open()"
      >
        AI口袋百宝箱
      </div>

      <DialogBox ref="dialogBox" @gettext="gettext" />
    </div>

    <div class="imgbig" v-if="imgBig">
      <div @click="() => (imgBig = false)">
        <el-icon style="color: white; font-size: 40px"><Close /></el-icon>
      </div>
      <img :src="imgs[i]" alt="" />
    </div>
  </div>
</template>

<script setup>
import { Close } from "@element-plus/icons-vue";
import { nextTick, onMounted, ref } from "vue";
import DialogBox from "./DialogBox.vue";
const modelvalue = ref("");
const imgBig = ref(false);

const errorimg = ref(false);

const radio = ref("2");

//左侧图片上传
const img1 = ref("");

const text1 = ref("");
const text2 = ref("");
const quality = ref(50);
//选中的图片张数
const imgcount = ref("2");
//控制是否展示视频
const waitvideo = ref(false);

//控制视频播放完毕展示图片
const showimg = ref(false);

//中间的图片
const imgs = ref([]);

//正在看的图片
const i = ref(0);

const dialogBox = ref(null);
const nowinput = ref(0);
const dialogVisible = ref(false);

const choose = () => {
  console.log("choose");
  document.getElementById("getimg").click();
};

const handleFileChange = (e) => {
  if (e.target.files[0] == null) {
    return;
  }

  console.log(e.target.files[0]);
  img1.value = URL.createObjectURL(e.target.files[0]);
};

const submit = () => {
  i.value = 0;
  imgs.value.length = 0;
  showimg.value = false;
  waitvideo.value = true;
  nextTick(() => {
    let v = document.getElementsByTagName("video");
    v?.[0]?.play();
  });
};

const handleVideoEnded = () => {
  waitvideo.value = false;
  for (let i = 0; i < imgcount.value; i++) {
    let file;

    file = require("../../../img/生成" + (i + 1) + ".jpeg");

    //参考图
    if (quality.value < 50) {
      console.log(quality.value);
      file = require("../../../img/参考图/" + (i + 1) + ".jpeg");
    }

    //标签
    if (quality.value > 50) {
      file = require("../../../img/标签/" + (i + 1) + ".jpeg");
    }
    //错误上传
    if (errorimg.value) {
      file = require("../../../img/错误上传" + (i + 1) + ".jpeg");
    }

    imgs.value.push(file);
  }
  showimg.value = true;
};

const chooseimg = (url, index) => {
  document.getElementById("choosingimg").setAttribute("src", url);
  i.value = index;
  console.log(url);
};

const onFocus1 = () => {
  nowinput.value = 1;
  dialogVisible.value = true;
};

const onFocus2 = () => {
  nowinput.value = 2;
  dialogVisible.value = true;
};

const gettext = (text) => {
  if (nowinput.value === 1) text1.value = text;
  if (nowinput.value === 2) text2.value = text;
};

onMounted(() => {});
</script>

<style scoped lang="scss">
* {
  font-size: 24px;
  font-weight: 600;
}
input {
  visibility: hidden;
  /* opacity:0; */
  position: absolute;
  left: 100px;
  top: 210px;
}

.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: start;
  padding: 20px 0;
  box-sizing: border-box;
  .common {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
  }

  .imgUpLoad {
    @extend .common;
    width: 300px;
    margin: 0 10px;
    align-items: center;

    h1 {
      color: white;
    }

    .chooseimg {
      width: 180px;
      height: 180px;
      position: relative;
      margin: 30px 0;

      img {
        width: 100%;
        height: 100%;
      }

      .changeagain {
        bottom: 0;
        width: 100%;
        height: 30px;
        opacity: 0.6;
        background-color: black;
        position: absolute;
        color: white;
        cursor: pointer;
        padding: 5px 0;
        text-align: center;
      }
    }

    .tochoose {
      position: relative;
      cursor: pointer;
      width: 180px;
      height: 180px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #141414;
      border-radius: 5px;
      margin: 30px 0;
    }
  }

  .imgshow {
    @extend .common;
    flex: 1;
    margin-right: 10px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;

    .imgshowbox {
      box-sizing: border-box;
      width: 100%;
      height: 0;
      flex: 1;
      padding: 10px;
      background-color: #000;
      display: flex;
      justify-content: center;
      align-items: center;

      border: {
        style: solid;
        width: 2px;
        color: #979797;
        radius: 10px;
      }
    }

    .imgshowbottom {
      height: 80px;
      div {
        display: flex;
        justify-content: center;
        align-items: center;

        div {
          margin: 10px 30px;
          width: 80px;
          height: 80px;
          background-color: rgb(80, 50, 116);
          font-size: 23px;
          color: white;
          padding: auto;

          img {
            cursor: pointer;
          }
        }
      }
    }
  }

  .tools {
    @extend .common;
    width: 360px;
    justify-content: flex-start;
    color: white;
    font-weight: 800;
    padding: 0 20px;

    div {
      width: 100%;
      padding: 10px;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }

    .tool1 {
      background-color: #141414;
      border-radius: 8px;
      margin-bottom: 20px;
    }

    .tool2 {
      background-color: #141414;
      border-radius: 8px;
      margin-bottom: 20px;
    }

    .tool3 {
      background-color: #141414;
      border-radius: 8px;
      margin-bottom: 20px;
      div {
        display: block;
        margin: 0;
        padding: 0;
      }
    }

    .tool35 {
      background-color: #141414;
      border-radius: 8px;
      margin-bottom: 20px;
      div {
        display: block;
        margin: 0;
        padding: 0;

        .el-slider {
          padding: 10px 0 0 0;
        }
      }

      i {
        font-size: 15px;
      }
    }

    .tool4 {
      background-color: #141414;
      border-radius: 8px;
      margin-bottom: 20px;
      div {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin: 0;

        .el-tag {
          width: 60px;
          height: 30px;
        }
      }
    }
    .dialog {
      justify-self: end;
      align-self: flex-end;
      margin: 10px 0;
      width: 70px;
      height: 50px;
      padding: 10px;
      border-radius: 25px 0 0 25px;
      background-color: rgb(166, 0, 255);
      cursor: pointer;
      transition: all 0.5s;
    }
  }
}
.hidden {
  visibility: hidden;
}

.imgbig {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba($color: #000000, $alpha: 0.7);
  display: flex;
  justify-content: center;
  align-items: center;

  div {
    position: fixed;
    top: 20px; /* 调整关闭按钮的位置 */
    right: 40px;
  }

  img {
    max-width: 90%; /* 确保图片响应式调整 */
    max-height: 90%;
    object-fit: contain; /* 保持图片比例 */
  }
}
.btn {
  background: linear-gradient(135deg, #2fb0ff, #b863fb);
  font-size: 24px;
  font-weight: 600;
  padding: 20px 0;
  border: none;
}
</style>